<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>复选框</title>
    </head>
    <body>
        
        <div class="wrapper">
            <p>别指望点击第一个复选框实现全选和全不选，因为没写</p>
            <div>
                <input type="checkbox" name="btn" id="btn" >
                <!-- 对于 lable 标签来说 data-select-all 是个属性(attribute) -->
                <label for="btn" data-select-all="true">全选/全不选</label>
            </div>
            <div>
                <input type="checkbox" name="hobby" > 足球 <br>
                <input type="checkbox" name="hobby" > 篮球 <br>
                <input type="checkbox" name="hobby" > 乒乓球 <br>
                <input type="checkbox" name="hobby" > 排球 <br>
                <input type="checkbox" name="hobby" > 地球 <br>
            </div>
        </div>

        <script type="text/javascript">
            ( ()=>{
                let label = document.querySelector( 'label[for=btn]' );

                let handler = {
                    handleEvent: function( e ){
                        let target = e.target || e.srcElement ;
                        console.dir( target );

                        // dataset 是一个 DOMStringMap 集合
                        // dataset 中存放的是用户通过 data-* 方式自定义的属性名称和属性值
                        // 对于 HTML 标签中的 data-select-all 属性来说，在 dataset 中相应的名称是 selectAll
                        let sa = target.dataset.selectAll ;
                        console.log( sa , typeof(sa) );
                        // 非空字符串 转换为 true ，空字符串或undefined被转换为 false
                        sa = Boolean( sa ); // 将 Boolean 当作普通函数来调用，将 string 转换为 boolean
                        console.log( sa , typeof(sa) );

                        // let previous = target.previousElementSibling;
                        // console.log( previous.checked );

                        let hobbies = document.querySelectorAll( 'input[name=hobby]' );
                        Array.from( hobbies ).forEach( ck => {
                            ck.checked = sa ;
                        } );

                        // 若 sa 为 true 则将 data-select-all 属性值设置为 空字符串
                        // 若 sa 为 false 则将 data-select-all 属性值设置为 非空字符串
                        target.dataset.selectAll = sa ? '' : 'true' ;

                        console.log( '- - - - - - - - - - - - - - - - - -' );

                        console.log( Boolean( 'false' ) ) ; // true
                        console.log( Boolean( '' ) ) ; // false
                        console.log( Boolean( undefined ) ); // false
                    }
                }
                
                label.addEventListener( 'click' , handler , false );

            } )();
        </script>

    </body>
</html>